/**
 * 🎨 vilan-admin-v1 主题切换动画工具
 * 借鉴 art-design-pro 的优秀实现
 */

/**
 * 临时禁用所有过渡效果
 * 避免在主题/布局切换时产生闪烁和卡顿
 */
export function disableTransitions() {
  const style = document.createElement('style')
  style.setAttribute('id', 'vilan-disable-transitions')
  style.textContent = `
    * {
      transition: none !important;
      animation: none !important;
    }
  `
  document.head.appendChild(style)
}

/**
 * 恢复过渡效果
 * 使用双重 requestAnimationFrame 确保在正确时机恢复
 */
export function enableTransitions() {
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      const style = document.getElementById('vilan-disable-transitions')
      if (style) {
        style.remove()
      }
    })
  })
}

/**
 * 主题切换动画（使用 View Transition API）
 * @param {MouseEvent} event - 鼠标点击事件
 * @param {Function} callback - 主题切换的回调函数
 * @returns {Promise<void>}
 */
export async function themeTransition(event, callback) {
  // 如果浏览器不支持 View Transition API，直接执行回调
  if (!document.startViewTransition) {
    callback()
    return
  }

  // 获取鼠标点击位置
  const x = event?.clientX ?? window.innerWidth / 2
  const y = event?.clientY ?? window.innerHeight / 2

  // 计算从点击位置到视窗最远角的距离（圆形扩散的最大半径）
  const endRadius = Math.hypot(
    Math.max(x, window.innerWidth - x),
    Math.max(y, window.innerHeight - y)
  )

  // 设置 CSS 变量，用于动画
  const root = document.documentElement
  root.style.setProperty('--vilan-transition-x', `${x}px`)
  root.style.setProperty('--vilan-transition-y', `${y}px`)
  root.style.setProperty('--vilan-transition-r', `${endRadius}px`)

  // 使用 View Transition API 执行动画
  const transition = document.startViewTransition(() => {
    callback()
  })

  // 等待动画完成
  await transition.finished
}

/**
 * 布局切换（直接执行，让CSS transitions处理平滑过渡）
 * 注意：布局切换需要过渡效果来实现平滑移动，不要禁用！
 * @param {Function} callback - 布局切换的回调函数
 */
export function layoutTransition(callback) {
  // 🎯 直接同步执行，避免 requestAnimationFrame 导致的组件卸载时序问题
  // CSS transitions 会自动处理平滑过渡效果
  callback()
}

/**
 * 提升页面刷新时的视觉体验
 * 在应用启动时添加 class，mounted 后移除
 * @param {boolean} addClass - 是否添加 class
 */
export function setThemeTransitionClass(addClass) {
  const body = document.body
  
  if (addClass) {
    body.classList.add('vilan-theme-loading')
  } else {
    setTimeout(() => {
      body.classList.remove('vilan-theme-loading')
    }, 300)
  }
}

/**
 * 检查浏览器是否支持 View Transition API
 * @returns {boolean}
 */
export function isSupportViewTransition() {
  return Boolean(document.startViewTransition)
}
